<template>


 <fragment>
   <template v-for="menu in iMenus">
      <el-submenu v-if="menu.children !== undefined && menu.children.length >= 1" :index="menu.menuId+''" :key="menu.menuId">
        <template slot="title">
          <i :class="menu.icon"></i>
          <span slot="title" style="color:#000;">{{menu.menuName}}</span>
        </template>
        <z-menu :menus="menu.children"></z-menu>
      </el-submenu>
      <el-menu-item v-else :index="menu.menuId+''" @click="handleRouter(menu)" :key="menu.menuId">
        <i :class="menu.icon"></i>
        <span slot="title">{{menu.menuName}}</span>
      </el-menu-item>
    </template>
  </fragment>
</template>
 
 <style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
    max-height: 800px;
  }
 </style>

 <script>
 import '@/assets/img/menu/menu.css'
 import menuOpt from '@/assets/data/menu.json'
   export default {
       name: 'zMenu',
       props: {
          menus: {
                type: Array,
                default: function () {
                    return [];
                },
                required: false
            }
       },
       data() {
        return {
            isCollapse: true,
            openCloseSty: 'expandSty',
            iMenus: this.menus,
            ops: {
                vuescroll: {
                    mode: 'native',
                    sizeStrategy: 'number',
                    detectResize: true
                },
                scrollPanel: {
                    initialScrollY: false,
                    initialScrollX: false,
                    scrollingX: true,
                    scrollingY: true,
                    speed: 300,
                    easing: undefined,
                    verticalNativeBarPos: 'right',
                    maxHeight:800,
                    maxWidth:1910,
                },
                bar: {
                   showDelay: 500,
                    onlyShowBarOnScroll: true,
                    keepShow: false,
                    background: '#c1c1c1',
                    opacity: 1,
                    hoverStyle: false,
                    specifyBorderRadius: false,
                    minSize: false,
                    size: '6px',
                    disable: false,
                },
                rail: {
                    background: '#01a99a',
                    opacity: 0,
                    size: '6px',
                    specifyBorderRadius: false,
                    gutterOfEnds: null,
                    gutterOfSide: '2px',
                    keepShow: false
                },
                scrollButton: {
                    enable: false,
                    background: 'rgb(3, 185, 118)',
                    opacity: 1,
                    step: 180,
                    mousedownStep: 30
                }
            }
        };
       },
       watch: {
           'menus': {
               deep: true,
               handler() {
                   this.iMenus = this.menus;
               }
           }
       },
       mounted() {
          console.log(this.menus);
       },
       methods: {
           handleRouter(menu) {
            // 跳转路由
            // this.$router.push(menu.route);
            this.$router.push({
                    path: menu.route
                }).catch(err => {err});
            }
       }
   }
 </script>